State management

State Management en Pinia in Vue

Introductie

In moderne applicaties is het beheren van data (of state) een van de belangrijkste uitdagingen. Hoe zorg je ervoor dat de data van je applicatie beschikbaar is op de juiste plaatsen en altijd actueel blijft?

Er zijn verschillende benaderingen voor het beheren van state, waaronder:

1. Lokale state: Data wordt beheerd binnen een component.
2. Services: Data wordt extern beheerd in een aparte logica-unit.
3. State Management Tools: Centrale oplossingen zoals Pinia of Vuex die een gestandaardiseerde aanpak bieden.

In deze les leer je:

• Wat state management is en waarom het belangrijk is.
• Wanneer je services of state management tools gebruikt.
• Hoe je Pinia installeert en gebruikt in een Vue 3-project.

Wat is State Management?

State verwijst naar de data die de status van je applicatie beschrijft. Bijvoorbeeld:

• De ingelogde gebruiker.
• Een lijst van producten in een winkelmand.
• De zichtbaarheid van een modal.

Probleem: Gedeelde State

Bij een eenvoudige applicatie kan lokale state in componenten voldoende zijn. Maar als je data wilt delen tussen meerdere componenten of beheren op een centrale plaats, wordt het lastiger:

• Hoe synchroniseer je data?
• Hoe zorg je ervoor dat updates consistent zijn?

State management biedt oplossingen voor deze uitdagingen door de data op een centrale plaats op te slaan en deze reactief beschikbaar te maken voor je applicatie.

Services vs. State Management Tools

Services

• Wat is het?: Een service is een aparte module die data en logica beheert. Het is meestal een klasse of object.
• Voordelen:
  • Eenvoudig te implementeren.
  • Geschikt voor kleinere applicaties.
• Nadelen:
  • Geen ingebouwde reactiviteit: je moet handmatig updates doorgeven.
  • Kan lastig zijn om te schalen in complexe applicaties.

Voorbeeld van een Service:

// services/todoService.ts
export class TodoService {
  private todos = [{ id: 1, text: 'Vue leren', done: false }];

  getTodos() {
    return this.todos;
  }

  addTodo(todo: { id: number; text: string; done: boolean }) {
    this.todos.push(todo);
  }
}

Gebruik deze service in een component:

<script setup lang="ts">
import { ref } from 'vue';
import { TodoService } from '@/services/todoService';

// Maak een instantie van de service
const todoService = new TodoService();
const todos = ref(todoService.getTodos());

// Voeg een nieuwe taak toe
const addTodo = () => {
  todoService.addTodo({ id: Date.now(), text: 'Nieuwe taak', done: false });
};
</script>

State Management Tools

• Wat is het?: Een gecentraliseerd systeem voor het beheren van state, zoals Pinia of Vuex.
• Voordelen:
  • Reactief: wijzigingen in de state worden automatisch doorgegeven aan componenten.
  • Schaalbaar: ideaal voor grote applicaties.
  • Tools zoals Vue DevTools maken debugging gemakkelijker.
• Nadelen:
  • Complexer dan services voor kleine applicaties.

Pinia is de aanbevolen oplossing voor Vue 3. Het is eenvoudig, snel en flexibel.

Waarom Pinia?

Pinia is de officiële state management library voor Vue 3. Het biedt:

1. Reactiviteit: State is automatisch up-to-date in alle componenten.
2. Eenvoud: Minder boilerplate dan Vuex.
3. TypeScript-ondersteuning: Volledig typeveilig.

Praktijk: Pinia Gebruiken

Stap 1: Installatie

Voeg Pinia toe aan je project via npm of yarn:

npm install pinia

Registreer Pinia in je main.ts bestand:

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

Stap 2: Een Store Maken

Creëer een store voor gedeelde state, bijvoorbeeld een takenlijst.

// stores/todoStore.ts
import { defineStore } from 'pinia';

export interface Todo {
  id: number;
  text: string;
  done: boolean;
}

export const useTodoStore = defineStore('todo', {
  state: () => ({
    todos: [] as Todo[],
  }),
  actions: {
    addTodo(text: string) {
      this.todos.push({ id: Date.now(), text, done: false });
    },
    toggleTodo(id: number) {
      const todo = this.todos.find((t) => t.id === id);
      if (todo) todo.done = !todo.done;
    },
  },
});

Stap 3: De Store Gebruiken in een Component

Gebruik de store in een Vue-component:

<template>
  <div>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <label>
          <input
            type="checkbox"
            v-model="todo.done"
            @change="toggleTodo(todo.id)"
          />
          {{ todo.text }}
        </label>
      </li>
    </ul>
    <input v-model="newTask" placeholder="Nieuwe taak toevoegen" @keyup.enter="addTodo" />
    <button @click="addTodo">Voeg taak toe</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useTodoStore } from '@/stores/todoStore';

// Gebruik de store
const todoStore = useTodoStore();
const todos = todoStore.todos;

const newTask = ref('');
const addTodo = () => {
  if (newTask.value.trim()) {
    todoStore.addTodo(newTask.value);
    newTask.value = '';
  }
};
const toggleTodo = (id: number) => {
  todoStore.toggleTodo(id);
};
</script>

Vergelijking: Wanneer Services en Wanneer Pinia?

Kenmerk	Service	Pinia
Complexiteit	Eenvoudig voor kleine applicaties.	Beter geschikt voor grotere apps.
Reactiviteit	Moet handmatig geïmplementeerd worden.	Automatisch ingebouwd.
Gedeelde State	Beperkt, vereist extra logica.	Eenvoudig en centraal.
Debugging	Moeilijk zonder extra tools.	Uitstekende tools zoals Vue DevTools.

Conclusie

• Gebruik services voor eenvoudige taken of als state-reactiviteit niet nodig is.
• Gebruik Pinia voor grotere applicaties waarin state gedeeld wordt tussen meerdere componenten en je wilt profiteren van de voordelen van een centrale, reactieve oplossing.